<template>
  <div id="school-echarts1" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
  data() {
    return {
      pointList: []
    }
  },
  mounted() {
    this.getDetectionPoint()
  },
  created() {},
  methods: {
    // 统计核酸检测点
    getDetectionPoint() {
      this.$get('/hs/map/getDetectionPoint').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.pointList = res.data
        // this.isShowPoint = true
        this.showEcharts()
      })
    },
    showEcharts() {
      let qyhsjc = [],
        yjjj = [],
        nameList = []
      qyhsjc = this.pointList.map((tag) => tag.qyhsjc)
      yjjj = this.pointList.map((tag) => tag.yjjj)
      nameList = this.pointList.map((tag) => tag.street)
      const myChart = this.$echarts.init(document.getElementById('school-echarts1'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: 'rgba(255,255,255,0.75)',
          extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
          textStyle: {
            fontSize: 14,
            color: '#000',
          },
          formatter: '{a}<br/>{b} :\n\n{c} 个',
        },
        legend: {
          top: '2%',
          left: 'center',
          itemGap: 10,
          itemWidth: 4,
          width: '100%',
          textStyle: {
            fontSize: 14, //字体大小
            color: '#ffffff', //字体颜色
          },
          // data: ['区域检测', '愿检尽检'],
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1a4b98',
              type: 'solid',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#009dff',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
          },
        },
        yAxis: {
          type: 'category',
          data: nameList,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#009dff',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //重点在这一块，其余可以忽略
            interval: 0, //这个一定要有，别忘记了
            rotate: 15,
            textStyle: {
              color: '#fff',
              fontSize: 10,
            },
          },
        },
        series: [
          {
            name: '区域检测',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                //柱形图上方标题
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                },
                barBorderRadius: [0, 24, 24, 0],
                color: '#29acff',
                // color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   //颜色渐变
                //   {
                //     offset: 0,
                //     color: '#29acff',
                //   },
                //   {
                //     offset: 1,
                //     color: '#4bdfff',
                //   },
                // ]),
              },
            },
            data: qyhsjc,
          },
          {
            name: '愿检尽检',
            type: 'bar',
            barWidth: 10,
            data: yjjj,
            itemStyle: {
              normal: {
                //柱形图上方标题
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                },
                barBorderRadius: [0, 24, 24, 0],
                color: '#FCD54B',
                // color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   //颜色渐变
                //   {
                //     offset: 0,
                //     color: '#29acff',
                //   },
                //   {
                //     offset: 1,
                //     color: '#eec842',
                //   },
                // ]),
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
